<template>
	<view class="list">
		<view class="listItem" @click="contractRecord()">
			<view class="iconBox">
				<image style="width: 28rpx;height: 28rpx;"
					src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1337.png">
				</image>
			</view>
			<view class="item-content">
				<text class="item-title">签约记录</text>
				<text class="contract-status"
					v-if="contractStore.hasContractApplication || contractStore.hasContractDetail"
					:class="getStatusClass()">
					{{ contractStore.contractStateText }}
				</text>
			</view>
			<image class="listImg"
				src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1334.png">
			</image>
		</view>
		<view class="listItem" @click="familyManage()">
			<view class="iconBox">
				<image style="width: 28rpx;height: 28rpx;"
					src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1343.png">
				</image>
			</view>
			<text>家庭管理成员</text>
			<image class="listImg"
				src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1334.png">
			</image>
		</view>
		<view class="listItem" @click="myHealth()">
			<view class="iconBox">
				<image style="width: 28rpx;height: 28rpx;"
					src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1349.png">
				</image>
			</view>
			<text>我的健康档案</text>
			<image class="listImg"
				src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1334.png">
			</image>
		</view>
		<view class="listItem">
			<view class="iconBox">
				<image style="width: 28rpx;height: 28rpx;"
					src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1355.png">
				</image>
			</view>
			<text>我的健康检测</text>
			<image class="listImg"
				src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1334.png">
			</image>
		</view>
		<view class="listItem">
			<view class="iconBox">
				<image style="width: 28rpx;height: 28rpx;"
					src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1361.png">
				</image>
			</view>
			<view class="doctorTeam" @click="ondoctorTeam()">
				<text>我的医生团队</text>
				<image class="listImg"
					src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1334.png">
				</image>

			</view>
		</view>
		<view class="listItem">
			<view class="iconBox">
				<image style="width: 28rpx;height: 28rpx;"
					src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1367.png">
				</image>
			</view>
			<view class="mine-servicepackge" @click="onservicepackge()">
				<text>我的服务包</text>
				<image class="listImg"
					src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1334.png">
				</image>
			</view>
		</view>
		<view class="listItem">
			<view class="iconBox">
				<image style="width: 28rpx;height: 28rpx;"
					src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1337.png">
				</image>
			</view>
			<text>我的收藏</text>
			<image class="listImg"
				src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1334.png">
			</image>
		</view>
	</view>

</template>

<script setup>
import {
	useContractStore
} from '@/store/contract.js'
import {
	useUserStore
} from '../../store/user';

// 获取状态机里的登陆人id
const userStore = useUserStore();
console.log(userStore.userId);

// 签约状态管理
const contractStore = useContractStore()

// 点击签约记录
function contractRecord() {
	// 检查是否有签约申请记录或签约详情
	if (contractStore.hasContractApplication || contractStore.hasContractDetail) {
		// 如果有签约记录，跳转到签约进度页面
		const contractId = contractStore.contractApplication?.contractId || contractStore.contractDetail?._id

		if (contractId) {
			uni.navigateTo({
				url: `/homepackge/pages/contract-progress/contract-progress?contractId=${contractId}`
			})
		} else {
			// 如果有申请记录但没有contractId，直接跳转到进度页面（会从状态机获取数据）
			uni.navigateTo({
				url: '/homepackge/pages/contract-progress/contract-progress'
			})
		}
	} else {
		// 如果没有签约记录，提示用户去申请签约
		uni.showModal({
			title: '提示',
			content: '您还没有签约记录，是否前往申请签约？',
			success: (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: '/homepackge/pages/nearbyLnstitutions/nearbyLnstitutions'
					})
				}
			}
		})
	}
}

// 获取状态样式类
function getStatusClass() {
	const state = contractStore.currentContractState
	switch (state) {
		case 0:
			return 'status-rejected' // 已驳回 - 红色
		case 1:
			return 'status-pending' // 待审核 - 橙色
		case 2:
			return 'status-payment' // 待支付 - 蓝色
		case 3:
			return 'status-active' // 已签约 - 绿色
		case 4:
			return 'status-renewal' // 待续约 - 紫色
		default:
			return 'status-default' // 默认 - 灰色
	}
}

// 跳转健康档案
function myHealth() {
	uni.navigateTo({
		url: `/pages/many-health-message/many-health-message?userId=${userStore.userId}`
	})
}

function familyManage() {
	uni.navigateTo({
		url: '/homepackge/pages/familyTeam-manage/familyTeam-manage'
	})
}

//点击我的服务包跳转
// function onservicepackge() {
// 	uni.navigateTo({
// 		url: '/minepackge/pages/mine-Allservicepackages/mine-Allservicepackages'
// 	})
// }


//我的医生团队跳转
function ondoctorTeam() {
	uni.navigateTo({
		url: '/minepackge/pages/mine-teamhomepage/mine-teamhomepage'
	})
}
//点击我的服务包跳转
function onservicepackge() {
	uni.navigateTo({
		url: '/minepackge/pages/mine-servicepackge/mine-servicepackge'
	})
}
</script>

<style lang="scss" scoped>
.listImg {
	width: 14rpx;
	height: 24rpx;
	position: absolute;
	right: 30rpx;
	top: 42rpx;

}

.listItem {
	height: 112rpx;
	display: flex;
	border-bottom: 1px solid #eee;
	position: relative;
	align-items: center;

	text {
		line-height: 112rpx;
	}

	.iconBox {
		background-color: #2984f819;
		width: 64rpx;
		height: 64rpx;
		border-radius: 10px;
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.item-title {
			font-size: 32rpx;
			color: #333;
			line-height: 1.2;
		}

		.contract-status {
			font-size: 24rpx;
			line-height: 1.2;
			margin-top: 4rpx;

			&.status-default {
				color: #999; // 默认灰色
			}

			&.status-rejected {
				color: #FF4757; // 已驳回红色
			}

			&.status-pending {
				color: #FF8C00; // 待审核橙色
			}

			&.status-payment {
				color: #4A90E2; // 待支付蓝色
			}

			&.status-active {
				color: #2ED573; // 已签约绿色
			}

			&.status-renewal {
				color: #8E44AD; // 待续约紫色
			}
		}
	}
}

.list {
	background: #fff;
	padding: 0 40rpx;
	padding-bottom: 60rpx;

}
</style>